<template>
    <div class="mian">
        <div class="mian-logo">LOGO</div>

        <!-- list -->
        <div class="mian-list">
            <!-- item -->
            <div v-for="(item, index) in list" :key="index">
                <!-- 主菜单 -->
                <div @click="onItem(index)" :class="[itemIndex == index ? 'onClick' : '', 'list-item']">
                    <!-- icon -->
                    <i v-if="itemIndex != index" :class="item.icon"></i>
                    <i v-if="item.children.length != 0 && itemIndex == index" class="el-icon-more"></i>
                    <i v-if="item.children.length == 0 && itemIndex == index" :class="item.icon"></i>
                    <!-- 文字 -->
                    <div class="item-mid">{{ item.title }}</div>
                    <!-- 箭头 -->
                    <i class="el-icon-arrow-right"></i>
                </div>
                <!-- 副菜单 -->
                <template v-if="item.children.length != 0">
                    <el-collapse-transition>
                        <div v-show="itemIndex == index">
                            <div v-for="(item1, index1) in item.children" :key="index1" @click="onChil(index1)"
                                class="muen-item">
                                <div :class="[chilItem == index1 ? 'onChil' : '', 'muen-box', 'list-item']">{{ item1.text }}
                                </div>
                            </div>
                        </div>
                    </el-collapse-transition>
                </template>
            </div>



        </div>
    </div>
</template>
<script>
export default {
    components: {

    },
    name: '',
    data() {
        return {
            list: [
                {
                    id: 0,
                    icon: 'el-icon-monitor',
                    title: '主页',
                    children: []
                }, {
                    id: 1,
                    icon: 'el-icon-folder-opened',
                    title: '资源管理',
                    children: [
                        {
                            id: '1-1',
                            text: '资源查询'
                        }, {
                            id: '1-1',
                            text: '楼盘管理'
                        }, {
                            id: '1-1',
                            text: '批量导入'
                        }, {
                            id: '1-1',
                            text: '下架资源'
                        }
                    ]
                }, {
                    id: 2,
                    icon: 'el-icon-notebook-1',
                    title: '客户管理',
                    children: []
                }, {
                    id: 3,
                    icon: 'el-icon-tickets',
                    title: '合同管理',
                    children: []
                }, {
                    id: 4,
                    icon: 'el-icon-guide',
                    title: '施工管理',
                    children: []
                }, {
                    id: 5,
                    icon: 'el-icon-setting',
                    title: '系统管理',
                    children: []
                },

            ],
            itemIndex: 1,    // 选中下标
            chilItem: 0,
        };
    },
    methods: {
        // 切换主菜单
        onItem(index) {
            this.itemIndex = index;
        },
        // 切换子菜单
        onChil(index) {
            this.chilItem = index;
        }
    },
    mounted() {

    }
};
</script>
<style scoped>
.mian {
    width: 275px;
    height: 100%;
    background: rgba(81, 123, 255, 1);
}

.mian-logo {
    font-size: 18px;
    font-weight: 600;
    line-height: 21.09px;
    color: rgba(255, 255, 255, 1);

    text-align: center;
    padding-top: 30px;
}

.mian-list {
    padding: 55px 12px 0 12px;
}

.list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-size: 18px;
    font-weight: 400;
    line-height: 26.06px;
    color: #fff;

    padding: 0 15px 0 35px;

    height: 52px;
    margin-top: 12px;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.list-item::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: #fff;
    border-radius: 12px;
}

.list-item::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 4px;
    height: 20px;
    background: rgba(255, 161, 0, 1);
    opacity: 0;
}

.onClick {
    color: #517BFF;

}

.onClick::before {
    width: 100%;
    transition: 0.3s all;
}

.onClick::after {
    opacity: 1;
    transition: 1s all;
}

.onClick .el-icon-arrow-right {
    color: #fff;
}

.item-mid {
    flex: 1;
    margin-left: 15px;
}


.muen-box {
    opacity: 0.6;
    padding-left: 68px;
}

.onChil {
    opacity: 1 !important;
}
</style>
